<template>
  <el-form
    class="login-form"
    status-icon
    :rules="loginRules"
    ref="loginForm"
    :model="loginForm"
    label-width="0"
  >
    <el-form-item prop="phone">
      <el-input
        size="small"
        @keyup.enter.native="handleLogin"
        v-model="loginForm.phone"
        auto-complete="off"
        :placeholder="$t('login.phone')"
      >
        <i slot="prefix" class="icon-shouji" />
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <div class="phoneCap">
        <el-input
          size="small"
          @keyup.enter.native="handleLogin"
          v-model="loginForm.code"
          auto-complete="off"
          :placeholder="$t('login.code')"
        >
          <i slot="prefix" class="icon-yanzhengma" />
        </el-input>
        <el-button>获取验证码</el-button>
      </div>
    </el-form-item>
    <el-form-item v-if="this.website.captchaMode" prop="code">
      <div class="captchaCode">
        <p>
          <span>请点击下图中<span style="color: red">所有的</span>狗</span>
          <span class="login-code-change"
            ><i class="el-icon-refresh-right"></i>刷新</span
          >
        </p>
        <div class="captBox">
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="img.id" v-for="img in imgs" :key="img.id">
              <img :src="img.src" alt="" />
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </el-form-item>
    <el-button class="login-submit" type="primary" @click="handleLogin">{{
      $t("login.submit")
    }}</el-button>
    <!--<p class="tip-register" @click="register">没有账号?去<span class="registe">注册</span></p>-->
  </el-form>
</template>

<script>
import { isvalidatemobile } from "@/util/validate";
import { mapGetters } from "vuex";
export default {
  name: "codelogin",
  data() {
    const validatePhone = (rule, value, callback) => {
      if (isvalidatemobile(value)[0]) {
        callback(new Error(isvalidatemobile(value)[1]));
      } else {
        callback();
      }
    };
    const validateCode = (rule, value, callback) => {
      if (value.length !== 4) {
        callback(new Error("请输入4位数的验证码"));
      } else {
        callback();
      }
    };
    return {
      msgText: "",
      msgTime: "",
      msgKey: false,
      loginForm: {
        phone: "",
        code: "",
      },
      loginRules: {
        phone: [{ required: true, trigger: "blur", validator: validatePhone }],
        code: [{ required: true, trigger: "blur", validator: validateCode }],
      },
      checkList: [],
      imgs: [
        {
          id: 1,
          // src: require("../../../public/img/login/1.jpeg"),
        },
      ],
    };
  },
  created() {
    this.msgText = this.config.MSGINIT;
    this.msgTime = this.config.MSGTIME;
  },
  mounted() {},
  computed: {
    ...mapGetters(["tagWel"]),
    config() {
      return {
        MSGINIT: this.$t("login.msgText"),
        MSGSCUCCESS: this.$t("login.msgSuccess"),
        MSGTIME: 60,
      };
    },
  },
  props: [],
  methods: {
    register() {
      this.$router.push({
        path:"/register",
      });
    },
    handleSend() {
      if (this.msgKey) return;
      this.msgText = this.msgTime + this.config.MSGSCUCCESS;
      this.msgKey = true;
      const time = setInterval(() => {
        this.msgTime--;
        this.msgText = this.msgTime + this.config.MSGSCUCCESS;
        if (this.msgTime === 0) {
          this.msgTime = this.config.MSGTIME;
          this.msgText = this.config.MSGINIT;
          this.msgKey = false;
          clearInterval(time);
        }
      }, 1000);
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch("LoginByPhone", this.loginForm).then(() => {
            this.$router.push({ path: this.tagWel.value });
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-button--primary {
  background: #1c7df0 !important;
}
.msg-text {
  display: block;
  width: 60px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.msg-text.display {
  color: #ccc;
}
// .el-dropdown {
//   display: flex;
//   justify-content: center;
// }
// .el-dropdown-link {
//   cursor: pointer;
//   color: #409eff;
// }
// .el-icon-arrow-down {
//   font-size: 12px;
// }
.tip-register{
  display: flex;
  justify-content: center;
  .registe{
    color:red;
  }
}
</style>
<style lang="scss">
.myBtn {
  .el-button--primary.is-plain {
    background: #8cc5ff;
  }
}
</style>
